<div class="product_zoom">
    <?php if (isset($data['images']) && !empty($data['images'])): ?>
        <div class="easyzoom easyzoom--with-thumbnails d-flex justify-content-center has-image">
            <a href="<?php echo $data['images'][0]; ?>" class="show-lightbox main-pro-lightbox" data-id="data-item-1">
                <img src="<?php echo $data['images'][0]; ?>" class="img-fluid main-pro-img cursor_pointer" alt="<?php echo htmlspecialchars($data['title']); ?>">
            </a>
        </div>
        
        <?php if (count($data['images']) > 1): ?>
        <div class="d-flex justify-content-center">
            <div style="width: 87%;">
                <div class="swiper-container zoom_product_thumnail position-relative thumbnails">
                    <div class="swiper-wrapper total-img" data-img="<?php echo count($data['images']); ?>">
                        <?php foreach ($data['images'] as $index => $image): ?>
                        <div class="swiper-slide">
                            <a href="<?php echo $image; ?>" class="thumnail-link" data-standard="<?php echo $image; ?>">
                                <img src="<?php echo $image; ?>" class="img-fluid" alt="<?php echo htmlspecialchars($data['title']); ?> Image <?php echo $index + 1; ?>">
                            </a>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    <div class="swiper-button-prev thumnail-swiper-button-prev" onclick="swiper_thumbnail_prev()"></div>
                    <div class="swiper-button-next thumnail-swiper-button-next" onclick="swiper_thumbnail_next()"></div>
                </div>
            </div>
        </div>
        <?php endif; ?>
    <?php else: ?>
        <div class="easyzoom-no-image d-flex justify-content-center">
            <a href="<?php echo $data['default_image']; ?>" class="show-lightbox main-pro-lightbox" data-id="data-item-1">
                <img src="<?php echo $data['default_image']; ?>" class="img-fluid main-pro-img cursor_pointer" alt="<?php echo htmlspecialchars($data['title']); ?>">
            </a>
        </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化lightbox
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true,
        'alwaysShowNavOnTouchDevices': true,
        'maxWidth': 800,
        'maxHeight': 600
    });
    
    // 初始化缩略图轮播
    var swiper = new Swiper('.zoom_product_thumnail', {
        slidesPerView: 4,
        spaceBetween: 5,
        loop: false,
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 5,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 5,
            },
            1024: {
                slidesPerView: 4,
                spaceBetween: 5,
            },
        },
        navigation: {
            nextEl: '.thumnail-swiper-button-next',
            prevEl: '.thumnail-swiper-button-prev',
        },
    });

    // 缩略图点击事件
    document.querySelectorAll('.thumnail-link').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            var newSrc = this.getAttribute('data-standard');
            var mainImg = document.querySelector('.main-pro-img');
            var mainLink = document.querySelector('.main-pro-lightbox');
            
            if (mainImg && mainLink) {
                mainImg.src = newSrc;
                mainLink.href = newSrc;
            }
        });
    });
});

function swiper_thumbnail_prev() {
    if (window.swiperThumbnail) {
        window.swiperThumbnail.slidePrev();
    }
}

function swiper_thumbnail_next() {
    if (window.swiperThumbnail) {
        window.swiperThumbnail.slideNext();
    }
}
</script>